<template>
  <div class="pick-local-input">
    <el-input
      v-if="!provideDisabled"
      v-model="address"
      size="small"
      class="zk-append-btn"
      suffix-icon="el-icon-location"
      @focus="visible=true"
    />
    <div v-else class="disabled-label">{{ address }}</div>
    <pick-location-from-b-map
      :position-object="positionObject"
      :visible.sync="visible"
      @onPick="positionObject=$event"
    />
  </div>
</template>
<script>
  import PickLocationFromBMap from '@/components/pick-location-b-map/with-dialog.vue'

  export default {
    name: 'PickLocationInput',
    components: { PickLocationFromBMap },
    inject: {
      provideDisabled: {
        type: Boolean,
        default: false,
      }
    },
    model: {
      prop: 'propValue',
      event: 'onChange',
    },
    props: {
      propValue: {
        type: Object,
        default: () => ({}),
      },
      option: {
        type: Object,
        default: () => ({}),
      }
    },
    data() {
      const { address } = this.propValue || {}
      return {
        positionObject: this.propValue,
        visible: false,
        address
      }
    },
    watch: {
      positionObject(newValue = {}) {
        this.address = newValue.address
        this.$emit('onChange', newValue)
      },
      propValue(newValue = {}) {
        this.positionObject = newValue
      },
    },
    methods: {
      onValueChange(value) {
        this.$emit('onChange', value)
      },
    },
  }
</script>
<style scoped lang="scss">
  .pick-local-input {
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    i.el-icon-location {
      font-size: 36px;
    }
  }
</style>
